<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>JsonTree.js - Bootstrap</title>
        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="../dist/jsontree.js.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <script src="../dist/jsontree.js"></script>
        <script src="js/scripts.js"></script>
    </head>

    <body>
        <div class="header">
            <h1 id="header">JsonTree.js - Bootstrap</h1>
            <p>This is a basic example of how to use JsonTree.js alongside Bootstrap.</p>
        </div>

        <div class="contents">
            <div id="json-tree-1" data-jsontree-js="bindingOptions( true, true, true, 1 )"></div>
            <br />
            <br />
            <div id="json-tree-2"></div>
        </div>

        <div class="contents">
            <h2>Manage Instances:</h2>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.render( document.getElementById( 'json-tree-2' ), bindingOptions() );">Render</button>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.renderAll();">Render All</button>
            <br>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.refresh( 'json-tree-1' );">Refresh</button>
            <br>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.refreshAll();">Refresh All</button>
            <br>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.openAll( 'json-tree-1' );">Open All</button>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.closeAll( 'json-tree-1' );">Close All</button>
            <br>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.backPage( 'json-tree-1' );">Back Page</button>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.nextPage( 'json-tree-1' );">Next Page</button>
            <button class="ctrl-button btn btn-primary" onclick="console.log( $jsontree.getPageNumber( 'json-tree-1' ) );">Get Page Number</button>
            <br>

            <h2>Manage Data:</h2>
            <button class="ctrl-button btn btn-primary" onclick="setJson();">Set JSON</button>
            <button class="ctrl-button btn btn-primary" onclick="console.log( $jsontree.getJson( 'json-tree-1' ) );">Get JSON</button>
            <button class="ctrl-button btn btn-primary" onclick="console.log( $jsontree.getSelectedJsonValues( 'json-tree-1' ) );">Get Selected JSON Values</button>
            <br>

            <h2>Manage Binding Options:</h2>
            <button class="ctrl-button btn btn-primary" onclick="updateBindingOptions();">Update Binding Options</button>
            <button class="ctrl-button btn btn-primary" onclick="console.log( $jsontree.getBindingOptions( 'json-tree-1' ) );">Get Binding Options</button>
            <br>

            <h2>Destroy:</h2>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.destroy( 'json-tree-1' );">Destroy (1)</button>
            <br>
            <button class="ctrl-button btn btn-primary" onclick="$jsontree.destroyAll();">Destroy All</button>
            <br />

            <h2>Configuration:</h2>
            <button class="ctrl-button btn btn-primary" onclick="setupConfiguration();">Set Configuration</button>
            <br />

            <h2>Additional Data:</h2>
            <button class="ctrl-button btn btn-primary" onclick="console.log( $jsontree.getIds() );">Get Ids</button>
            <button class="ctrl-button btn btn-primary" onclick="console.log( $jsontree.getVersion() );">Get Version</button>
        </div>
    </body>

    <script>
        function setupConfiguration() {
            $jsontree.setConfiguration( {
                safeMode: false
            } );
        }

        function setJson() {
            $jsontree.setJson( "json-tree-1", "{value1:true,value2:\"This is a string\",value3:false,value4:5,value7:null}" )
        }
    </script>
</html>